<template>
    <div class="cmt-container">
        <h3>发表评论</h3>
        <hr>
        <textarea placeholder="请输入要BB的内容（做多吐槽120字）" maxlength="120" v-model="msg"></textarea>
        <mt-button type="primary" size="large" @click="postComment">发表评论</mt-button>

        <div class="cmt-list">
            <div class="cmt-item" v-for="(item, index) in comments" :key="item.id">
                <div class="cmt-title">
                    第{{index + 1}}楼&nbsp;用户：{{item.user}}&nbsp;&nbsp;发表时间：{{item.tdate | dataFormat}}
                </div>
                <div class="cmt-body">
                    {{item.content}}
                </div>
            </div>
        </div>

        <mt-button type="danger" size="large" plain @click="getMore" v-if="flag">加载更多</mt-button>
        <p v-if="!flag" class="contmore">没有数据加载</p>

    </div>
</template>

<script>
    export default {
        name: "comment.vue",
        data() {
            return {
                pageIndex : 1,
                contList: [
                    {id : 1, "user" : "匿名用户", tdate : '2020-12-12 21:32:31', "content" : "太极转运鼠肋"},
                    {id : 2, "user" : "匿名用户", tdate : '2020-02-03 21:32:31', "content" : "埒肛载"},
                    {id : 3, "user" : "匿名用户", tdate : '2020-05-15 21:32:31', "content" : "柑顶戴"},
                    {id : 4, "user" : "匿名用户", tdate : '2020-04-30 21:32:31', "content" : "大法师"},
                    {id : 5, "user" : "匿名用户", tdate : '2020-12-12 21:32:31', "content" : "太极转运鼠肋"},
                    {id : 6, "user" : "匿名用户", tdate : '2020-02-03 21:32:31', "content" : "形式"},
                    {id : 7, "user" : "匿名用户", tdate : '2020-05-15 21:32:31', "content" : "柑顶戴"},
                    {id : 8, "user" : "匿名用户", tdate : '2020-04-30 21:32:31', "content" : "大法师"},
                    {id : 9, "user" : "匿名用户", tdate : '2020-12-12 21:32:31', "content" : "太极转运鼠肋"},
                    {id : 10, "user" : "匿名用户", tdate : '2020-02-03 21:32:31', "content" : "革肛 肛"},
                    {id : 11, "user" : "匿名用户", tdate : '2020-05-15 21:32:31', "content" : "柑顶戴"},
                    {id : 12, "user" : "匿名用户", tdate : '2020-04-30 21:32:31', "content" : "大法师"},
                    {id : 13, "user" : "匿名用户", tdate : '2020-12-12 21:32:31', "content" : "太极转运鼠肋"},
                    {id : 14, "user" : "匿名用户", tdate : '2020-02-03 21:32:31', "content" : "形貌菜价"},
                    {id : 15, "user" : "匿名用户", tdate : '2020-05-15 21:32:31', "content" : "柑顶戴"},
                    {id : 16, "user" : "匿名用户", tdate : '2020-04-30 21:32:31', "content" : "大法师"}
                ],
                comments : [],
                flag : true,
                msg : '',
                id : null,
            }
        },
        created(){
            this.getComments();
        },
        methods : {
            getComments(ev){//获取评论
                if(this.pageIndex * 5 - 1 < this.contList.length) {
                    for (let i = this.pageIndex * 5 - 1; i >= (this.pageIndex - 1) * 5; i--) {
                        this.comments = this.comments.concat(this.contList[i]);
                    }
                }else{
                    this.flag = !this.flag;
                }
            },
            getMore(ev){
                //加载更多
                this.pageIndex ++;
                this.getComments(ev);
            },
            postComment(){
                if(this.msg !== ''){
                    //发表评价
                    for(let i = 1; i < this.contList.length; i++){
                        if(this.contList[i-1].id > this.contList[i].id){
                            this.id = this.contList[i-1].id;
                        }else{
                            this.id = this.contList[i].id;
                        }
                    }
                    var newInfo = {id : this.id +1, "user" : "匿名用户", tdate : Date.now(), "content" : this.msg.trim()};
                    this.contList.push(newInfo);
                    this.comments.unshift(newInfo);
                    this.msg = "";
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .cmt-container{
        h3{
            font-size: 1.2em;
        }
        textarea{
            font-size: 14px;
            height: 85px;
            margin: 0;
        }
        .cmt-list{
            margin-top: 10px;
            margin-bottom: 10px;
            .cmt-item{
                margin-bottom: 5px;
                font-size: 12px;
                .cmt-title{
                    text-indent: .5em;
                    background-color: #ccc;
                    line-height: 30px;
                }
                .cmt-body{
                    line-height: 35px;
                    text-indent: 2em;
                    border: 1px solid #ccc;
                }
            }
        }
        .contmore{
            text-align: center;
            font-size: 14px;
        }
    }

</style>